<template>
  <div>
    <div class="myPage" v-if="this.isLogin === true">
      <!-- 基本信息 -->
      <div class="basic">
        <p>
          <b>{{ info.personName }}</b>
          <span>在人才网的第{{ info.regDays + 1 }}天~</span>
        </p>
        <van-image round width="66" height="66" :src="
            require(info.sex == '男'
              ? '@/assets/img/my/no-avatar-boy.png'
              : '@/assets/img/my/no-avatar-girl.png')
          " v-if="info.imgHeadUrl == ''" />
        <van-image round width="66" height="66" :src="info.imgHeadUrl" v-else />
      </div>

      <!-- 招聘统计 -->
      <ul class="data">
        <!-- <li>
          <span>0</span>
          <span>关注企业</span>
        </li> -->
        <li @click="onCollectJob">
          <span>{{ info.jobCellectCount }}</span>
          <span>职位收藏</span>
        </li>
        <!-- class="unread" -->
        <li @click="onWhoReadMe">
          <span>{{ info.whoReadMeCount }}</span>
          <span>谁看过我</span>
        </li>
        <!-- <li @click="onAsk">
          <span>{{ info.count_ask }}</span>
          <span>企业问答</span>
        </li> -->
      </ul>

      <!-- 常用工具 -->
      <dl class="tool">
        <dt>常用工具</dt>
        <dd>
          <!-- <p @click="onViewJobHis">
            <van-image width="22" height="22" :src="require('@/assets/img/my/tool-ico01.png')" />
            <span>浏览足迹</span>
          </p> -->
          <p @click="onRefuse">
            <van-image width="22" height="22" :src="require('@/assets/img/my/tool-ico02.png')" />
            <span>屏蔽公司</span>
          </p>
          <p @click="onFeedBack">
            <van-image width="22" height="22" :src="require('@/assets/img/my/tool-ico03.png')" />
            <span>意见反馈</span>
          </p>
          <!-- <p @click="onBSTel">
            <van-image width="22" height="22" :src="require('@/assets/img/my/tool-ico04.png')" />
            <span>办事电话</span>
          </p> -->
          <!-- <p @click="onWXKF">
            <van-image width="22" height="22" :src="require('@/assets/img/my/tool-ico05.png')" />
            <span>微信客服</span>
          </p> -->
          <p @click="onWXGZH">
            <van-image width="22" height="22" :src="require('@/assets/img/my/tool-ico06.png')" />
            <span>关注公众号</span>
          </p>

          <p @click="toCompany">
            <van-image width="22" height="22" :src="require('@/assets/img/my/tool-ico07.png')" />
            <span>我要招人</span>
          </p>
          <p @click="onSetting">
            <van-image width="22" height="22" :src="require('@/assets/img/my/tool-ico08.png')" />
            <span>设置</span>
          </p>
        </dd>
      </dl>

      <!-- 许可证 -->
      <div class="license" @click="toLicense">
        <span>人力资源服务许可证</span>
        <span>营业执照</span>
      </div>
    </div>

    <div class="myPage-login" v-else>
      <span>您需要登录才可查看更多信息</span>
      <van-button type="primary" round @click="onToLogin">登录</van-button>
      <span class="identity" @click="toCompany">我要招聘</span>
    </div>
  </div>
</template>

<script>
import { Image as VanImage, Button, Dialog, Toast } from "vant";
import { checkPersonLogin } from "@/util/session";
import { mixin_person_tologin, mixin_wx } from "@/mixin/mixins";
import MyMixin from "@/mixin/MyMixin";
import Global from "@/Global";
export default {
  name: "MyIndexPage",
  components: {
    [VanImage.name]: VanImage,
    [Button.name]: Button,
  },
  mixins: [mixin_person_tologin, mixin_wx, MyMixin],
  // 定义属性
  data() {
    return {
      isLogin: checkPersonLogin(),
      info: {},
    };
  },
  mounted() {
    this.$bus.$on(Global.bus_person_login, (loginResult) => {
      console.log(loginResult);
      if (loginResult) {
        this.isLogin = true;
        this.init();
      }
    });
    this.$bus.$on(Global.bus_person_mine_update, () => {
      this.init();
    });
    if (this.isLogin) {
      this.init();
    }

    this.$bus.$on(Global.bus_person_resume_uploadHeadImg, (url) => {
      this.info.imgHeadUrl = url;
    });
  },
  beforeDestroy() {
    this.$bus.$off(Global.bus_person_login);
    this.$bus.$off(Global.bus_person_mine_update);
    this.$bus.$off(Global.bus_person_resume_uploadHeadImg);
  },
  // 方法集合
  methods: {
    async init() {
      this.$api.get("/Wap/GetMineData").then((res) => {
        if (res.success) {
          this.info = res.response;
        }
      });
    },
    //点击收藏职位
    onCollectJob() {
      this.$router.push({ name: "person-my-collectJob" });
    },
    //点击谁看过我
    onWhoReadMe() {
      this.$router.push({ name: "person-my-whoReadMe" });
    },
    //点击企业问答
    onAsk() {
      this.$router.push({ name: "person-my-ask" });
    },
    //屏蔽企业
    onRefuse() {
      this.$router.push({ name: "person-refuse" });
    },
    //意见反馈
    onFeedBack() {
      this.$router.push({ name: "person-feedback" });
    },
    //设置
    onSetting() {
      this.$router.push({ name: "person-setting" });
    },
    //微信公众号
    onWXGZH() {
      this.$router.push({ name: "person-wxgzh" });
    },
    //微信客服
    onWXKF() {
      //this.$router.push({ name: "person-wxkf" });
      this.toWXKFPerson();
    },
    //办事电话
    onBSTel() {
      this.$router.push({ name: "person-my-bsdh" });
    },
    //浏览足迹
    onViewJobHis() {
      this.$router.push({ name: "person-my-viewJobHis" });
    },
    //我要招人
    toCompany() {
      Dialog.confirm({ message: "确认切换为企业HR？" }).then(() => {
        this.isLogin = false;
        this.switchUser("C");
      });
    },
    //许可证
    toLicense() {
      // this.$router.push({ name: "person-license" });
      window.location.href = 'https://app.573job.com/app_vue/#/person/my/license';
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/nav-bar/index.less";
@import "@/assets/css/common.less";

/* 我的主页-去登录 */
.myPage-login {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 84%;
}

.myPage-login span {
  font-size: 16px;
  color: #666;
}

.myPage-login button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 104px;
  height: 34px;
  padding: 0;
  border: none;
  margin-top: 15px;
  background-color: #05a6f0;
}

.myPage-login button span {
  font-size: 17px;
  color: #fff;
}

.myPage-login span.identity {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 40px;
  border: 1px solid #e8e8e8;
  border-radius: 30px;
  margin-top: 40px;
}

/* 我的主页 */
.myPage {
  padding: 0 15px;
  background: url("@/assets/img/my/my-bg.png") no-repeat top center / 100% 140px;
}

/* 基本信息 */
.myPage .basic {
  display: flex;
  padding: 20px 4px 20px;
}

.myPage .basic img {
  width: 62px;
  height: 62px;
  border: 2px solid #fff;
}

.myPage .basic p {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  height: 66px;
}

.myPage .basic p b {
  font-size: 26px;
  color: #fff;
}

.myPage .basic p span {
  font-size: 13px;
  color: #fff;
}

/* 招聘统计 */
.myPage .data {
  display: flex;
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: #fff;
}

.myPage .data li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 15px 0;
}

.myPage .data li.unread::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #f00;
}

.myPage .data li span:nth-child(1) {
  margin-bottom: 4px;
  font-size: 24px;
  font-weight: 500;
  color: #05a6f0;
}

.myPage .data li span:nth-child(2) {
  font-size: 12px;
  color: #333;
}

/* 常用工具 */
.myPage .tool {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background-color: #fff;
}

.myPage .tool dt {
  padding: 0 15px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  line-height: 50px;
}

.myPage .tool dd {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.myPage .tool dd p {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  padding: 10px 0 14px;
}

.myPage .tool dd p span {
  margin-top: 10px;
  font-size: 12px;
  color: #333;
}

/* 许可证 */
.myPage .license {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.myPage .license span {
  padding: 0 10px;
  font-size: 12px;
  color: #cfcfcf;
  line-height: 1;
}

.myPage .license span + span {
  border-left: 0.7px solid #e6e6e6;
}
</style>
